<template>
  <el-select v-model="value" class="language-select"
             filterable
             size="small"
             placeholder="请设置翻译语种"
             @change="onSel">
    <template v-slot:prefix>
      <span>翻译语种:</span>
    </template>
    <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
    />
  </el-select>
</template>

<script lang="ts">
import {ref} from 'vue'
import language from './language.json'

export default {
  name: 'languageSelect',
  setup(props: object, ctx: any) {
    const value = ref('en')
    const options = [
      ...language
    ]
    const onSel = (sel: string) => {
      ctx.emit('change', sel)
    }
    return {
      value,
      options,
      onSel
    }
  }
}
</script>

<style lang="scss">
.language-select {
  width: 145px;

  .el-input {
    font-size: 12px;
  }
}
</style>
